<template>
    <div>
        <div class="header">
            <div class="logo">通用权限管理系统</div>
            <div class="top-nav">
                <el-menu theme="dark" :default-active="$store.state.router.headNavRouter" class="el-menu-folin" mode="horizontal"  unique-opened router>
                     <el-menu-item
                                :index="item.path"
                                v-for='(item,index) in $router.options.routes'
                                v-if='!item.hidden && showMenu(item.path)'
                                :key="item.path">
                            {{item.name}}
                        </el-menu-item>
                </el-menu>
            </div>
            <div class="user-info">
                <el-dropdown trigger="hover" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}}
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <el-dialog title="修改密码" custom-class="chanage-password-dialog"  :visible.sync="dialogFormVisible" :close-on-click-modal="false" :show-close="false" v-loading="loading.formStatus" >
            <el-form :model="form" :rules="formRules" ref="form" :label-width="formLabelWidth">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input type="password" v-model="form.oldPassword" :autofocus="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="form.newPassword" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmNewPpassword">
                    <el-input type="password" v-model="form.confirmNewPpassword" @keyup.enter.native="submitChangePassword('form')" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false"><i class="fa fa-power-off"></i> 取 消</el-button>
                <el-button type="primary" @click="submitChangePassword('form')"><i class="fa fa-save "></i> 确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            var validateOldPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原密码'));
                } else {
                    callback();
                }
            }
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    callback();
                }
            }
            var validateConfirmPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入新密码'));
                } else if (value !== this.form.newPassword) {
                    callback(new Error('新密码两次不一致!'));
                } else {
                    callback();
                }
            }
            return {
                name:'',
                dialogFormVisible:false,
                formLabelWidth: '110px',
                activeIndex: '1',
                loading:{
                    formStatus : false//表单loading
                },
                form:{
                    oldPassword:'',
                    newPassword:'',
                    confirmNewPpassword:''
                },
                formRules:{
                    oldPassword: [
                        { required:true,validator:validateOldPassword, trigger: 'blur' }
                    ],
                    newPassword: [
                        { required:true,validator:validatePassword, trigger: 'blur' }
                    ],
                    confirmNewPpassword: [
                        { required:true,validator:validateConfirmPassword, trigger: 'blur' }
                    ]
                }
            }
        },
        computed:{
            username(){
                let username = localStorage.getItem('ms_username');
                return username ? username : this.name;
            }
        },
        methods:{
            showMenu(path)
            {
                return this.$store.state.user.userInfo.web_routes.find(o=>o.startsWith(path))
            },
            handleCommand(command) {
                if(command == 'logout'){
                    localStorage.removeItem('ms_username')
                    this.$store.dispatch("set_userInfo",null)
                    this.$router.push('/login');
                }
                else if(command == 'changePassword'){
                    this.dialogFormVisible = true;
                }
            },
            submitChangePassword(formName){//提交修改密码表单
                this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.loading.formStatus = true;
                            this.$$api_permission_ChangePassword(this.form,data=>{
                                    this.dialogFormVisible = false
                                    this.loading.formStatus = false
                                    this.$message({
                                            type: 'success',
                                            message: '密码修改成功!'
                                    });
                                },
                                {
                                    errFn:()=>{
                                        this.loading.formStatus = false
                                        //this.dialogFormVisible = false
                                    }
                                }
                            )
                        } 
                })
            }
        },
        watch: {
            dialogFormVisible:function(){
                if(!this.dialogFormVisible){
                    this.$refs['form'].resetFields();
                }
            }
        }
    }
</script>
<style>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        font-size: 22px;
        line-height: 60px;
        color: #fff;
    }
    .header .logo{
        float: left;
        width:190px;
        padding-left: 10px;
    }
    .top-nav
    {
        float: left;
        font-size: 16px;
        color: #fff;
    }
    .user-info {
        float: right;
        padding-right: 20px;
        font-size: 16px;
        color: #fff;
    }
    .user-info .el-dropdown-link{
        position: relative;
        display: inline-block;
        padding-left: 50px;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
    }
    .user-info .user-logo{
        position: absolute;
        left:0;
        top:15px;
        width:40px;
        height:40px;
        border-radius: 50%;
    }    
    .el-dropdown-menu__item{
        text-align: center;
        font-size:14px;
    }
    .el-dialog__body
    {
        padding:20px;
    }
    .el-dialog__footer
    {
        padding-top:0px;
    }
    .chanage-password-dialog
    {
        width:420px;
    }
    
</style>
